<template>
  <view class="container">

    <!-- 表单内容 -->
    <scroll-view class="form-content" scroll-y>
      <!-- 任务信息模块 -->
      <view class="form-section card-shadow">
        <view class="section-title">任务信息</view>

        <!-- 取件地址输入框 -->
        <view class="form-item">
          <view class="item-label info-label">
            <view class="icon-wrapper info-icon">
              <uni-icons type="location" size="18" color="#00BFFF" />
            </view>
            <text class="info-text">取件地址</text>
          </view>
          <view class="item-content location-container" @tap="handleSelectPickupAddress">
            <view class="location-input">
              <text class="placeholder" v-if="!pickupAddress">请选择取件地址</text>
              <text v-else>{{ pickupAddress }}</text>
            </view>
            <uni-icons type="right" size="16" color="#999999" />
          </view>
        </view>

        <!-- 快递单号录入 -->
        <view class="form-item">
          <view class="item-label info-label">
            <view class="icon-wrapper info-icon">
              <uni-icons type="list" size="18" color="#00BFFF" />
            </view>
            <text class="info-text">快递单号</text>
          </view>
          <view class="item-content input-container">
            <input
              type="text"
              v-model="trackingNumber"
              placeholder="请输入快递单号"
              placeholder-class="placeholder"
            />
          </view>
        </view>

         <!-- 自动填充按钮 -->
        <view class="form-item">
          <view class="item-content">
            <button 
              class="auto-fill-btn full-width" 
              @tap="handleAutoFillDormitory"
            >
              <uni-icons type="home-filled" size="14" color="#00BFFF" />
              自动填充信息
            </button>
          </view>
          <view class="debug-info" v-if="showDebugInfo">
            <text class="debug-text">用户信息状态: {{ userInfo ? '已获取' : '未获取' }}</text>
          </view>
        </view>

        <!-- 送达地址输入框 -->
        <view class="form-item">
          <view class="item-label info-label">
            <view class="icon-wrapper info-icon">
              <uni-icons type="location-filled" size="18" color="#00BFFF" />
            </view>
            <text class="info-text">送达地址</text>
          </view>
          <view class="item-content">
            <view class="location-container" @tap="handleSelectDeliveryAddress">
              <view class="location-input">
                <text class="placeholder" v-if="!deliveryAddress">请选择送达地址或地图标注</text>
                <text v-else>{{ deliveryAddress }}</text>
              </view>
              <uni-icons type="right" size="16" color="#999999" />
            </view>
          </view>
        </view>

        <!-- 收件人信息输入框 -->
        <view class="form-item">
          <view class="item-label info-label">
            <view class="icon-wrapper info-icon">
              <uni-icons type="person" size="18" color="#00BFFF" />
            </view>
            <text class="info-text">收件人姓名</text>
          </view>
          <view class="item-content input-container">
            <input
              type="text"
              v-model="recipientName"
              placeholder="请输入收件人姓名"
              placeholder-class="placeholder"
              maxlength="20"
            />
          </view>
        </view>

       

        <!-- 联系电话输入框 -->
        <view class="form-item">
          <view class="item-label info-label">
            <view class="icon-wrapper info-icon">
              <uni-icons type="phone" size="18" color="#00BFFF" />
            </view>
            <text class="info-text">联系电话</text>
          </view>
          <view class="item-content input-container">
            <input
              type="number"
              v-model="contactPhone"
              placeholder="请输入收件人电话"
              placeholder-class="placeholder"
              maxlength="11"
            />
            <!-- 一键复制粘贴按钮 -->

          </view>
        </view>

       

        <!-- 重量输入框 -->
        <view class="form-item">
          <view class="item-label info-label">
            <view class="icon-wrapper info-icon">
              <uni-icons type="info" size="18" color="#00BFFF" />
            </view>
            <text class="info-text">重量估计</text>
          </view>
          <view class="item-content input-container">
            <input
              type="number"
              v-model="weight"
              placeholder="请输入大概重量(kg)"
              placeholder-class="placeholder"
              @input="calculatePrice"
            />
          </view>
        </view>

        <!-- 价格显示区域 -->
        <view class="form-item">
          <view class="item-label trade-label">
            <view class="icon-wrapper trade-icon">
              <uni-icons type="wallet" size="18" color="#FF9F1C" />
            </view>
            <text class="trade-text">建议价格</text>
          </view>
          <view class="item-content price-container">
            <view class="price-display">
              <text v-if="priceRange.length > 0">¥{{ priceRange[0] }} - ¥{{ priceRange[1] }}</text>
              <text v-else>---</text>
            </view>
            <view class="price-explanation">
              <text v-if="priceExplanation" class="explanation-text">{{ priceExplanation }}</text>
            </view>
          </view>
          
          <!-- 价格分析图表 -->
          <view class="price-chart-container" v-if="weight && priceRange.length > 0">
            <view class="chart-header">
              <text class="chart-title">价格分析</text>
              <view class="chart-legend">
                <view class="legend-item">
                  <view class="legend-color low"></view>
                  <text>最低价</text>
                </view>
                <view class="legend-item">
                  <view class="legend-color high"></view>
                  <text>最高价</text>
                </view>
              </view>
            </view>
            <view class="price-chart">
              <view class="chart-bars">
                <view 
                  class="chart-bar low" 
                  :style="{ height: '40%' }"
                >
                  <view class="bar-value">¥{{ priceRange[0] }}</view>
                </view>
                <view 
                  class="chart-bar high" 
                  :style="{ height: '100%' }"
                >
                  <view class="bar-value">¥{{ priceRange[1] }}</view>
                </view>
              </view>
              <view class="chart-labels">
                <text>最低价</text>
                <text>最高价</text>
              </view>
            </view>
            <view class="chart-insight">
              <uni-icons type="info" size="16" color="#FF9F1C" />
              <text>{{ getPriceInsight() }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 悬赏与时效模块 -->
      <view class="form-section card-shadow">
        <view class="section-title">悬赏与时效</view>

        <!-- 悬赏金额输入 -->
        <view class="form-item">
          <view class="item-label trade-label">
            <view class="icon-wrapper trade-icon">
              <uni-icons type="wallet" size="18" color="#FF9F1C" />
            </view>
            <text class="trade-text">悬赏金额</text>
          </view>
          <view class="item-content price-container">
            <view class="price-input-wrapper">
              <view class="price-input">
                <input 
                  type="digit" 
                  v-model="manualReward" 
                  placeholder="请输入悬赏金额(元)"
                  placeholder-class="placeholder"
                />
              </view>
            </view>
            <view class="smart-suggest-btn" @tap="handleSmartSuggest" v-if="weight">
              <text>智能推荐</text>
            </view>
          </view>
          <view class="reward-suggestion" v-if="suggestedReward">
            <uni-icons type="lightbulb" size="14" color="#FF9F1C" />
            <text>建议悬赏：¥{{ suggestedReward }}（基于重量分析）</text>
          </view>
        </view>

        <!-- 期望送达时间段 -->
        <view class="form-item">
          <view class="item-label trade-label">
            <view class="icon-wrapper trade-icon">
              <uni-icons type="calendar" size="18" color="#FF9F1C" />
            </view>
            <text class="trade-text">期望送达时间段</text>
          </view>
          <view class="item-content select-container">
            <!-- 直接使用picker，点击其可见区域即可触发 -->
            <picker
              mode="multiSelector"
              :range="multiPickerRange"
              :value="multiPickerValue"
              @change="onMultiPickerChange"
            >
              <view class="picker-content select-input">
                <!-- 显示已选时间段或placeholder -->
                <text v-if="expectedDeliveryTime">已选：{{ expectedDeliveryTime }}</text>
                <text v-else>请选择期望送达时间段</text>
              </view>
            </picker>
          </view>
        </view>

        <!-- 加急选项 -->
        <view class="form-item">
          <view class="item-label trade-label">
            <view class="icon-wrapper trade-icon">
              <uni-icons type="notification-filled" size="18" color="#FF9F1C" />
            </view>
            <text class="trade-text">加急发布</text>
          </view>
          <view class="item-content">
            <view class="urgent-option" @tap="handleToggleUrgent">
              <switch :checked="isUrgent" @change="handleUrgentChange" active-color="#00BFFF" />
              <text>加急发布</text>
              <text class="urgent-fee">（价格上浮30%）</text>
            </view>
          </view>
        </view>

        <!-- 价格明细 -->
        <view class="price-breakdown" v-if="isUrgent">
          <view class="breakdown-item">
            <text class="item-label">基础赏金</text>
            <text class="item-value">¥{{ manualReward }}</text>
          </view>
          <view class="breakdown-item">
            <text class="item-label">加急费用</text>
            <text class="item-value">+30%</text>
          </view>
          <view class="breakdown-item total">
            <text class="item-label">总赏金</text>
            <text class="item-value">¥{{ calculateTotalReward() }}</text>
          </view>
        </view>
      </view>

      <!-- 补充说明 -->
      <view class="form-section card-shadow">
        <view class="section-title">补充说明</view>

        <!-- 补充说明输入框 -->
        <view class="form-item">
          <view class="item-label setting-label">
            <view class="icon-wrapper setting-icon">
              <uni-icons type="info" size="18" color="#47B960" />
            </view>
            <text class="setting-text">补充说明</text>
          </view>
          <view class="item-content">
            <textarea
              v-model="specialRequirements"
              placeholder="请补充说明（如：是否是易碎品,是否有特殊物件）"
              placeholder-class="placeholder"
              class="description-textarea"
              maxlength="200"
            />
            <view class="word-count">{{ specialRequirements.length }}/200</view>
          </view>
        </view>
      </view>
	</scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <button class="submit-btn" @tap="handleSubmit">发布代取任务</button>
    </view>

    <!-- 支付弹窗 -->
    <PaymentModal 
      ref="paymentModal"
      :reward="Number(manualReward)"
      :taskInfo="paymentTaskInfo"
      :baseFee="basePublishFee"
      :urgentFee="urgentPublishFee"
      @success="handlePaymentSuccess"
      @cancel="handlePaymentCancel"
    />
  </view>
</template>

<script>
import PaymentModal from '@/components/PaymentModal.vue'

export default {
  components: {
    PaymentModal
  },
  data() {
    return {
      // 表单数据
      pickupAddress: '', // 取件地址
      deliveryAddress: '', // 送达地址
      recipientName: '', // 收件人姓名
      contactPhone: '', // 联系电话
      trackingNumber: '', // 快递单号
      itemDescription: '', // 快递物品描述
      weight: '', // 大概重量
      expectedDeliveryTime: '', // 期望送达时间
      specialRequirements: '', // 特殊要求
      isInsured: false, // 是否保价
      insuranceAmount: '', // 保价金额
      manualReward: '', // 手动输入的悬赏金额
      isUrgent: false,

      // 价格相关
      priceRange: [], // 价格区间
      priceExplanation: '', // 价格说明

      // 日期选项
      dateOptions: [
        { label: '今天', value: new Date().toISOString().split('T')[0] },
        { label: '明天', value: new Date(Date.now() + 24*60*60*1000).toISOString().split('T')[0] },
        { label: '后天', value: new Date(Date.now() + 2*24*60*60*1000).toISOString().split('T')[0] }
      ],

      // 时间段选项
      timeSlots: Array.from({ length: 11 }, (_, i) => {
        const hour = i + 9;
        const endHour = hour + 1;
        return `${hour.toString().padStart(2, '0')}:00-${endHour.toString().padStart(2, '0')}:00`;
      }),

      selectedDateIndex: -1,
      selectedTimeSlotIndex: -1,

      // 地址选项
      pickupAddressOptions: [
        { value: '校内中邮', label: '校内中邮' },
        { value: '西门菜鸟', label: '西门菜鸟' },
        { value: '校内顺风', label: '校内顺风' },
       
      ],

      deliveryAddressOptions: [
        { value: '鹿田', label: '鹿田' },
        { value: '龙北', label: '龙北' },
        { value: '龙南', label: '龙南' }
      ],

      userInfo: null, // 确保 userInfo 是响应式数据

      // 支付相关
      basePublishFee: 3, // 基础发布费3元
      urgentPublishFee: 0, // 加急发布费
      paymentTaskInfo: {}, // 支付任务信息
      pendingTaskData: null, // 待发布的任务数据
      
      // 智能推荐
      suggestedReward: null, // 建议的悬赏金额
      
      // 调试相关
      showDebugInfo: true, // 是否显示调试信息
    }
  },
  computed: {
    multiPickerRange() {
      return [
        this.dateOptions.map(d => d.label),
        this.timeSlots
      ];
    },
    multiPickerValue() {
      return [
        this.selectedDateIndex === -1 ? 0 : this.selectedDateIndex,
        this.selectedTimeSlotIndex === -1 ? 0 : this.selectedTimeSlotIndex
      ];
    }
  },
  watch: {
    weight: {
      handler: 'calculatePrice',
      immediate: true
    }
  },
  onShow() {
    console.log('[用户信息获取] 开始获取用户信息...');
    
    // 尝试多个可能的存储键名
    const possibleKeys = [
      'uni-id-pages-userInfo',
      'userInfo', 
      'uni_id_pages_userInfo',
      'uniIdUserInfo'
    ];
    
    let userInfo = null;
    let usedKey = null;
    
    for (const key of possibleKeys) {
      const stored = uni.getStorageSync(key);
      console.log(`[用户信息获取] 尝试键名: ${key}, 结果:`, stored);
      
      if (stored) {
        userInfo = stored;
        usedKey = key;
        break;
      }
    }
    
    if (!userInfo) {
      console.log('[用户信息获取] 未找到用户信息，所有键名都为空');
      uni.showToast({
        title: '请先登录',
        icon: 'none'
      });
      setTimeout(() => {
        uni.navigateTo({
          url: '/uni_modules/uni-id-pages/pages/login/login-withoutpwd'
        });
      }, 1500);
      return;
    }
    
    // 解析用户信息
    if (typeof userInfo === 'string') {
      try {
        userInfo = JSON.parse(userInfo);
        console.log('[用户信息获取] JSON解析成功:', userInfo);
      } catch (e) {
        console.error('[用户信息获取] JSON解析失败:', e);
        userInfo = null;
      }
    }
    
    if (userInfo && userInfo._id) {
      this.userInfo = {
        _id: userInfo._id,
        username: userInfo.username,
        nickname: userInfo.nickname || userInfo.username || '用户',
        avatar: (userInfo.avatar_file && userInfo.avatar_file.url) 
                  ? userInfo.avatar_file.url 
                  : (userInfo.avatar || '/static/images/default_avatar.png'),
        phone: userInfo.phone || userInfo.mobile || userInfo.phoneNumber || null
      };
      console.log('[用户信息获取] 用户信息设置成功:', this.userInfo);
    } else {
      console.log('[用户信息获取] 用户信息无效，_id字段缺失:', userInfo);
      uni.showToast({
        title: '用户信息无效，请重新登录',
        icon: 'none'
      });
      setTimeout(() => {
        uni.navigateTo({
          url: '/uni_modules/uni-id-pages/pages/login/login-withoutpwd'
        });
      }, 1500);
      return;
    }
  },
  methods: {
    onMultiPickerChange(e) {
      const [dateIdx, timeSlotIdx] = e.detail.value;
      this.selectedDateIndex = dateIdx;
      this.selectedTimeSlotIndex = timeSlotIdx;
      this.updateExpectedDeliveryTime();
    },
    updateExpectedDeliveryTime() {
      if (this.selectedDateIndex !== -1 && this.selectedTimeSlotIndex !== -1) {
        this.expectedDeliveryTime = `${this.dateOptions[this.selectedDateIndex].value} ${this.timeSlots[this.selectedTimeSlotIndex]}`;
      }
    },
    handleSelectPickupAddress() {
      uni.showActionSheet({
        itemList: this.pickupAddressOptions.map(option => option.label),
        success: (res) => {
          this.pickupAddress = this.pickupAddressOptions[res.tapIndex].value;
        }
      });
    },
    handleGetCurrentLocation() {
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          const { latitude, longitude } = res;
          uni.request({
            url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=YOUR_MAP_KEY`,
            success: (result) => {
              if (result.data.status === 0) {
                const address = result.data.result.address;
                this.deliveryAddress = address;
                uni.showToast({
                  title: '已获取当前位置',
                  icon: 'success'
                });
              } else {
                uni.showToast({
                  title: '获取地址失败',
                  icon: 'none'
                });
              }
            },
            fail: () => {
              uni.showToast({
                title: '获取地址失败',
                icon: 'none'
              });
            }
          });
        },
        fail: () => {
          uni.showToast({
            title: '获取位置失败',
            icon: 'none'
          });
        }
      });
    },
    handleSelectDeliveryAddress() {
      uni.showActionSheet({
        itemList: [...this.deliveryAddressOptions.map(option => option.label), '手动输入'],
        success: (res) => {
          if (res.tapIndex < this.deliveryAddressOptions.length) {
            this.deliveryAddress = this.deliveryAddressOptions[res.tapIndex].value;
          } else if (res.tapIndex === this.deliveryAddressOptions.length) {
            // 选择手动输入
            this.showManualInputDialog();
          }
        }
      });
    },

    // 显示手动输入对话框
    showManualInputDialog() {
      uni.showModal({
        title: '手动输入送达地址',
        editable: true,
        placeholderText: '请输入送达地址',
        success: (res) => {
          if (res.confirm && res.content) {
            this.deliveryAddress = res.content.trim();
          }
        }
      });
    },
    handleAutoFillRecipient() {
      uni.showToast({
        title: '自动填充功能待实现',
        icon: 'none'
      });
    },
    handleCopyPhoneNumber() {
      if (this.contactPhone) {
        uni.setClipboardData({
          data: this.contactPhone,
          success: () => {
            uni.showToast({
              title: '手机号已复制',
              icon: 'success'
            });
          }
        });
      } else {
        uni.showToast({
          title: '手机号为空',
          icon: 'none'
        });
      }
    },
    handleToggleInsurance() {
      this.isInsured = !this.isInsured;
      if (!this.isInsured) {
        this.insuranceAmount = '';
      }
    },
    handleUrgentChange(e) {
      this.isUrgent = e.detail.value;
    },
    calculateTotalReward() {
      const baseReward = parseFloat(this.manualReward) || 0;
      if (this.isUrgent) {
        return (baseReward * 1.3).toFixed(2);
      }
      return baseReward.toFixed(2);
    },
    async handleSubmit() {
      if (!this.pickupAddress) {
        uni.showToast({
          title: '请输入取件地址',
          icon: 'none'
        });
        return;
      }
      if (!this.deliveryAddress) {
        uni.showToast({
          title: '请输入送达地址',
          icon: 'none'
        });
        return;
      }
      if (!this.expectedDeliveryTime) {
        uni.showToast({
          title: '请选择期望送达时间',
          icon: 'none'
        });
        return;
      }
      if (!this.manualReward) {
        uni.showToast({
          title: '请输入赏金金额',
          icon: 'none'
        });
        return;
      }
      if (!this.specialRequirements) {
        uni.showToast({
          title: '请填写详细描述',
          icon: 'none'
        });
        return;
      }
      if (!this.recipientName) {
        uni.showToast({
          title: '请输入收件人姓名',
          icon: 'none'
        });
        return;
      }
      if (!this.contactPhone) {
        uni.showToast({
          title: '请输入联系电话',
          icon: 'none'
        });
        return;
      }

      // 计算发布费用
      this.calculatePublishFee()
      
      // 准备任务数据
      this.pendingTaskData = {
        type: 'express',
        title: '快递代取',
        description: this.specialRequirements,
        reward: parseFloat(this.calculateTotalReward()),
        status: 'pending',
        publisher_id: this.userInfo._id,
        publisher_name: this.userInfo.nickname,
        publisher_avatar: this.userInfo.avatar,
        publish_time: new Date().toISOString(),
        is_urgent: this.isUrgent || false,
        tags: this.isUrgent ? ['urgent'] : [],
        pickup_address: this.pickupAddress,
        delivery_address: this.deliveryAddress,
        expected_time: this.expectedDeliveryTime,
        contact_name: this.recipientName,
        contact_phone: this.contactPhone,
         
  payment_id: null,
  payment_amount: null,
  payment_method: null
      }

      // 设置支付任务信息
      this.paymentTaskInfo = {
        id: this.pendingTaskData.id, // 添加任务ID
        title: this.pendingTaskData.title,
        description: this.pendingTaskData.description,
        type: 'express',
        baseFee: this.basePublishFee // 添加基础费用
      }

      // 显示支付弹窗
      this.$refs.paymentModal.show()
    },
    calculatePrice() {
      if (this.weight) {
        const weightValue = parseFloat(this.weight);
        if (weightValue <= 1) {
          this.priceRange = [5, 8];
          this.priceExplanation = '1千克以内（含1千克）：基础价5元 + 重量浮动0-3元';
        } else if (weightValue <= 3) {
          this.priceRange = [8, 12];
          this.priceExplanation = '1-3千克（含3千克）：基础价8元 + 重量浮动0-4元';
        } else if (weightValue <= 5) {
          this.priceRange = [12, 18];
          this.priceExplanation = '3-5千克（含5千克）：基础价12元 + 重量浮动0-6元';
        } else {
          this.priceRange = [18, 25];
          this.priceExplanation = '5千克以上：基础价18元 + 重量浮动0-7元';
        }
      } else {
        this.priceRange = [];
        this.priceExplanation = '';
      }
    },

    // 获取价格洞察
    getPriceInsight() {
      if (!this.weight || this.priceRange.length === 0) {
        return '请输入重量查看价格分析';
      }

      const weightValue = parseFloat(this.weight);
      const avgPrice = (this.priceRange[0] + this.priceRange[1]) / 2;
      
      if (weightValue <= 1) {
        return '轻量物品，建议设置较低赏金，容易找到接单者';
      } else if (weightValue <= 3) {
        return '中等重量，建议设置适中赏金，平衡成本与吸引力';
      } else if (weightValue <= 5) {
        return '较重物品，建议设置较高赏金，确保有人愿意接单';
      } else {
        return '超重物品，建议设置高额赏金，或考虑分批处理';
      }
    },

    // 智能推荐悬赏金额
    handleSmartSuggest() {
      if (!this.weight) {
        uni.showToast({
          title: '请先输入重量',
          icon: 'none'
        });
        return;
      }

      const weightValue = parseFloat(this.weight);
      let suggestedAmount;

      if (weightValue <= 1) {
        suggestedAmount = 6; // 轻量物品，建议6元
      } else if (weightValue <= 3) {
        suggestedAmount = 10; // 中等重量，建议10元
      } else if (weightValue <= 5) {
        suggestedAmount = 15; // 较重物品，建议15元
      } else {
        suggestedAmount = 20; // 超重物品，建议20元
      }

      this.suggestedReward = suggestedAmount;
      this.manualReward = suggestedAmount;

      uni.showToast({
        title: '已为您推荐悬赏金额',
        icon: 'success'
      });
    },
    handleAutoFillDormitory() {
      console.log('[自动填充] 开始自动填充用户信息...');
      console.log('[自动填充] 当前userInfo:', this.userInfo);
      
      // 自动填充用户信息
      if (this.userInfo) {
        // 填充收件人姓名（使用用户昵称）
        const nickname = this.userInfo.nickname || this.userInfo.username || '';
        this.recipientName = nickname;
        console.log('[自动填充] 填充收件人姓名:', nickname);
        
        // 填充联系电话（从用户信息中获取，如果有的话）
        if (this.userInfo.phone) {
          this.contactPhone = this.userInfo.phone;
          console.log('[自动填充] 填充联系电话:', this.userInfo.phone);
        } else {
          console.log('[自动填充] 用户信息中没有电话号码');
        }
        
        // 设置默认送达地址为鹿田（学生宿舍区）
        if (!this.deliveryAddress) {
          this.deliveryAddress = '鹿田';
          console.log('[自动填充] 设置默认送达地址: 鹿田');
        }
        
        uni.showToast({
          title: '信息已自动填充',
          icon: 'success'
        });
        console.log('[自动填充] 自动填充完成');
      } else {
        console.log('[自动填充] userInfo为空，无法自动填充');
        uni.showToast({
          title: '用户信息获取失败，请重新登录',
          icon: 'none'
        });
      }
    },


    // 计算发布费用
    calculatePublishFee() {
      this.basePublishFee = 3 // 基础发布费3元
      this.urgentPublishFee = this.isUrgent ? Math.round(this.basePublishFee * 0.3) : 0 // 加急费30%
    },
    // 支付成功回调
    async handlePaymentSuccess(paymentInfo) {
      try {
        uni.showLoading({
          title: '发布中...'
        })

        // 添加支付信息到任务数据
        this.pendingTaskData.payment_id = paymentInfo.paymentId
    this.pendingTaskData.payment_amount = paymentInfo.amount
    this.pendingTaskData.payment_method = paymentInfo.method
    this.pendingTaskData.publish_time = new Date().toISOString() 
    console.log('【任务发布】最终任务数据:', this.pendingTaskData)
        // 调用云函数发布任务
        const res = await uniCloud.callFunction({
          name: 'addTask',
          data: {
            taskData: this.pendingTaskData
          }
        })

        uni.hideLoading()

        if (res.result.code === 200) {
          uni.showToast({
            title: '发布成功',
            icon: 'success'
          })
          
          // 发布成功后跳转到首页
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/index/index'
            })
          }, 1500)
        } else {
          uni.showToast({
            title: res.result.msg || '发布失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: '发布失败，请重试',
          icon: 'none'
        })
        console.error('发布任务失败：', error)
      }
    },
    // 支付取消回调
    handlePaymentCancel() {
      // 清空待发布数据
      this.pendingTaskData = null
      this.paymentTaskInfo = {}
    }
  }
}
</script>

<style>
:root {
  --primary-color: #00BFFF /* 主色调 - 天蓝色 */
  --secondary-color: #FF9F1C /* 辅助色 - 活力橙 */
  --success-color: #47B960 /* 成功色 - 清新绿 */
  --error-color: #FF4D4F /* 错误色 */
  --bg-color: #F0F8FF /* 背景色 - 淡蓝白 */
  --info-color: #00BFFF /* 任务信息区颜色 */
  --trade-color: #FF9F1C /* 悬赏与时效模块颜色 */
  --setting-color: #47B960 /* 特殊要求模块颜色 */
}

.container {
  min-height: 100vh;
  background-color: var(--bg-color);
  display: flex;
  flex-direction: column
}

.form-content {
  flex: 1;
  padding: 30rpx;
  padding-bottom: calc(30rpx + 120rpx)
}

.form-section {
  background: linear-gradient(135deg, #ffffff, #f8f9fa);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4px 20px rgba(0, 191, 255, 0.08);
  border: 1px solid rgba(0, 191, 255, 0.1);
}

.card-shadow {
  box-shadow: 0 8px 24px rgba(0, 191, 255, 0.08)
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 24rpx;
  position: relative;
  padding-left: 16rpx;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 24rpx;
  background: linear-gradient(135deg, #00BFFF, #0099FF);
  border-radius: 3rpx;
}

.form-item {
  margin-bottom: 30rpx;
  position: relative
}

.form-item:not(:last-child)::after {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(to right, transparent, #E0F3FF, transparent);
  margin: 20rpx 0
}

.form-item:last-child {
  margin-bottom: 0
}

.item-label {
  font-size: 14px;
  margin-bottom: 12rpx;
  display: flex;
  align-items: center;
  gap: 12rpx
}

.info-label {
  color: var(--info-color)
}

.info-icon {
  background-color: rgba(0, 191, 255, 0.1)
}

.info-text {
  font-weight: 500
}

.trade-label {
  color: var(--trade-color)
}

.trade-icon {
  background-color: rgba(255, 159, 28, 0.1)
}

.trade-text {
  font-weight: 500
}

.setting-label {
  color: var(--setting-color)
}

.setting-icon {
  background-color: rgba(71, 185, 96, 0.1)
}

.setting-text {
  font-weight: 500
}

.icon-wrapper {
  width: 45rpx;
  height: 45rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center
}

.item-label text {
  font-size: 14px;
  color: #666666
}

.item-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%
}

.location-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 8rpx;
  padding: 20rpx;
  min-height: 80rpx
}

.location-input {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333333
}

.placeholder {
  color: #999999;
  font-size: 14px
}

.input-container {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12rpx
}

.input-container input {
  flex: 1;
  font-size: 14px;
  color: #333333;
  border: 1px solid #e8e8e8;
  border-radius: 8rpx;
  padding: 10rpx;
  box-sizing: border-box
}

.auto-fill-btn,
.copy-paste-btn {
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx;
  border: 1px solid var(--primary-color);
  border-radius: 8rpx;
  color: var(--primary-color);
  font-size: 12px;
  gap: 4rpx;
  transition: all 0.2s ease
}

.auto-fill-btn:active,
.copy-paste-btn:active {
  opacity: 0.8
}

.description-textarea {
  width: 100%;
  height: 200rpx;
  font-size: 14px;
  color: #333333;
  line-height: 1.5;
  border: 1px solid #e8e8e8;
  border-radius: 8rpx;
  padding: 10rpx;
  transition: all 0.2s;
  box-sizing: border-box
}

.description-textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 191, 255, 0.1)
}

.word-count {
  text-align: right;
  font-size: 12px;
  color: #999999;
  margin-top: 8rpx
}

.price-container {
  display: flex;
  align-items: center;
  gap: 20rpx;
  width: 100%
}

.price-input-wrapper {
  flex: 1
}

.price-input {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  background: linear-gradient(135deg, #f9f9f9, #ffffff);
  border-radius: 12rpx;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 191, 255, 0.1);
  border: 1px solid #e0e8f0;
  transition: all 0.3s ease
}

.price-input:focus-within {
  border-color: var(--primary-color);
  box-shadow: inset 0 2px 6px rgba(0, 191, 255, 0.1), 0 4px 12px rgba(0, 191, 255, 0.15)
}

.price-input input {
  flex: 1;
  font-size: 14px;
  color: #333;
  border: none;
  background: transparent;
  height: 100%;
  padding: 0;
  box-sizing: content-box
}

.ai-price-btn {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  background: linear-gradient(135deg, #37e047, #fff);
  border-radius: 12rpx;
  border: 1px solid #37e047;
  color: var(--secondary-color);
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(255, 159, 28, 0.1);
  transition: all 0.3s ease;
  gap: 8rpx
}

.ai-price-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 4px rgba(255, 159, 28, 0.1)
}

.bargain-option, .urgent-option {
  display: flex;
  align-items: center
}

.bargain-option text, .urgent-option text {
  font-size: 14px;
  color: #666666;
  margin-left: 8rpx
}

.urgent-fee {
  color: #ff4d4f
}

.bottom-bar-placeholder {
  height: 120rpx;
  padding-bottom: env(safe-area-inset-bottom)
}

.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
  display: flex;
  gap: 20rpx;
  z-index: 10
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  background: linear-gradient(135deg, #00BFFF, #0099FF);
  border-radius: 45rpx;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(0, 191, 255, 0.2);
  transition: all 0.3s;
  border: none;
  line-height: 1;
}

.submit-btn:active {
  transform: scale(0.98);
  box-shadow: 0 4px 8px rgba(0, 191, 255, 0.15);
}

.reward-unit {
  color: rgb(255, 159, 28);
  margin-left: 10rpx;
  font-size: 14px
}

.price-range-info {
  font-size: 14px;
  color: #666;
  margin-top: 8rpx
}

.reward-amount {
  font-size: 18px;
  color: #FF9F1C;
  font-weight: bold
}

.price-explanation {
  margin-top: 8rpx
}

.explanation-text {
  font-size: 12px;
  color: #666;
  line-height: 1.4
}

.price-display {
  font-size: 16px;
  color: #FF9F1C;
  font-weight: 500
}

.auto-fill-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16rpx 24rpx;
  background: linear-gradient(135deg, #f9f9f9, #ffffff);
  border-radius: 12rpx;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 191, 255, 0.1);
  border: 1px solid #e0e8f0;
  transition: all 0.3s ease;
  gap: 8rpx
}

.auto-fill-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 4px rgba(0, 191, 255, 0.1)
}

.full-width {
  width: 100%
}

.price-breakdown {
  margin-top: 20rpx;
  padding: 20rpx;
  background: #f9f9f9;
  border-radius: 8rpx
}

.breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx
}

.breakdown-item:last-child {
  margin-bottom: 0
}

.breakdown-item.total {
  margin-top: 12rpx;
  padding-top: 12rpx;
  border-top: 1px solid #e8e8e8;
  font-weight: 500
}

.item-label {
  color: #666;
  font-size: 14px
}

.item-value {
  color: #FF9F1C;
  font-size: 14px
}

.breakdown-item.total .item-value {
  color: #FF4D4F;
  font-size: 16px
}

/* 价格图表样式 */
.price-chart-container {
  margin-top: 20rpx;
  padding: 20rpx;
  background: linear-gradient(135deg, #f8f9fa, #ffffff);
  border-radius: 12rpx;
  border: 1px solid #e8f4fd;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.chart-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.chart-legend {
  display: flex;
  gap: 16rpx;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6rpx;
  font-size: 12px;
  color: #666;
}

.legend-color {
  width: 12rpx;
  height: 12rpx;
  border-radius: 2rpx;
}

.legend-color.low {
  background-color: #4cd964;
}

.legend-color.high {
  background-color: #ff4d4f;
}

.price-chart {
  margin-bottom: 16rpx;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 120rpx;
  margin-bottom: 12rpx;
  padding: 0 10rpx;
  gap: 20rpx;
}

.chart-bar {
  flex: 1;
  border-radius: 4rpx 4rpx 0 0;
  position: relative;
  transition: all 0.3s ease;
  min-height: 20rpx;
}

.chart-bar.low {
  background: linear-gradient(to top, #e8f5e8, #4cd964);
}

.chart-bar.high {
  background: linear-gradient(to top, #ffe5e5, #ff4d4f);
}

.bar-value {
  position: absolute;
  top: -30rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #666;
  white-space: nowrap;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 10rpx;
}

.chart-labels text {
  flex: 1;
  text-align: center;
  font-size: 10px;
  color: #999;
}

.chart-insight {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 16rpx;
  background: rgba(255, 159, 28, 0.1);
  border-radius: 8rpx;
  border-left: 4rpx solid #FF9F1C;
}

.chart-insight text {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

/* 智能推荐样式 */
.smart-suggest-btn {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  background: linear-gradient(135deg, #37e047, #fff);
  border-radius: 12rpx;
  border: 1px solid #37e047;
  color: var(--secondary-color);
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(255, 159, 28, 0.1);
  transition: all 0.3s ease;
  gap: 8rpx;
  white-space: nowrap;
}

.smart-suggest-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 4px rgba(255, 159, 28, 0.1);
}

.reward-suggestion {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-top: 12rpx;
  padding: 12rpx 16rpx;
  background: rgba(255, 159, 28, 0.1);
  border-radius: 8rpx;
  border-left: 4rpx solid #FF9F1C;
}

.reward-suggestion text {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

/* 调试信息样式 */
.debug-info {
  margin-top: 12rpx;
  padding: 12rpx 16rpx;
  background: rgba(0, 191, 255, 0.1);
  border-radius: 8rpx;
  border-left: 4rpx solid #00BFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.debug-text {
  font-size: 12px;
  color: #666;
}
</style>
